<template>
  <div class="hc-order-detail hc-paddingt48">
    <van-nav-bar fixed title="订单详情" left-arrow @click-left="back()" />
    <div class="hc-order-content">
      <div class="hc-detail-info hc-clearfix">
        <div class="hc-info-title">订单信息</div>
        <div class="hc-info-content">
          <table>
            <tr>
              <td>订单号:</td>
              <td>{{orderDetail.orderNo?orderDetail.orderNo:'无'}}</td>
            </tr>
            <tr>
              <td>订单金额:</td>
              <td>￥{{orderDetail.total?amountFormat(orderDetail.total):'0.00'}}</td>
            </tr>
            <tr>
              <td class="hc-col-3">商品名称:</td>
              <td>{{orderDetail.title}}</td>
            </tr>
            <tr>
              <td class="hc-col-3">配送方式:</td>
              <td>{{orderDetail.address_id ? '送货上门' : '自提'}}</td>
            </tr>
            <tr v-show="orderDetail.address_id">
              <td class="hc-col-3">收货人:</td>
              <td>{{orderDetail.name}}</td>
            </tr>
            <tr v-show="orderDetail.address_id">
              <td class="hc-col-3">手机号:</td>
              <td>{{orderDetail.telephone}}</td>
            </tr>
            <tr v-show="orderDetail.address_id">
              <td class="hc-col-3">收货地址:</td>
              <td>{{orderDetail.address}}</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="hc-detail-info hc-clearfix" v-show="orderDetail.address_id">
        <div class="hc-info-title">配送信息</div>
        <div>
          <van-form @submit="onSubmit">
            <van-field
              v-model="tran_company"
              name="tran_company"
              label="物流公司名"
              placeholder="物流公司名"
              :rules="[{ required: true, message: '请填写物流公司名' }]"
            />
            <van-field
              v-model="tran_num"
              type="tel"
              name="tran_num"
              label="物流单号"
              placeholder="物流单号"
              :rules="[{ required: true, message: '请填写物流单号' }]"
            />
            <div style="margin: 16px;"> 
              <van-button color="#f2a93b" round block type="info" native-type="submit">发货</van-button>
            </div>
          </van-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { sendGoods } from '../../api/ajax'
import { HcMessageBox } from '../../components/hcMessage/index.js'
export default {
  name: "orderDetail",
  data() {
    return {
      orderDetail: {},
      tran_company: '',
      tran_num: ''
    };
  },
  methods: {
    async onSubmit({ tran_company, tran_num }) {
      const { id: order_id } = this.$route.query;
      const result = await sendGoods({
        order_id,
        tran_company,
        tran_num
      })
      console.log(result)
      if(result.code === 1) {
        HcMessageBox('发货成功');
        setTimeout(() => {
          HcMessageBox.close();
          this.back();
        }, 1000)
      }
    }
  },
  mounted() {
    this.orderDetail = this.$route.query;
    this.tran_company = this.orderDetail.tran_company;
    this.tran_num = this.orderDetail.tran_num;
  }
};
</script>

<style lang="scss">
.van-field--error .van-field__control, .van-field--error .van-field__control::placeholder {
  color: inherit !important;
}
.hc-order-detail {
  // padding-bottom: 100px;
  .hc-black {
    color: #000;
  }
  .hc-order-content {
    padding-top: 45px;
    margin-top: 10px;
  }
  .hc-chargeback-button {
    margin: 20px 0;
    text-align: center;
    button {
      width: px2rem(330);
      height: 45px;
      background: #fe6244;
      border-radius: 22px;
      border: none;
      color: #ffffff;
      font-size: 16px;
    }
  }
  .hc-detail-info {
    background-color: #fff;
    margin-bottom: 10px;
    .hc-info-title {
      line-height: 45px;
      font-size: 14px;
      padding-left: 15px;
      border-bottom: 1px solid #f3f3f3;
    }
    .hc-info-content {
      border-bottom: 1px solid #f3f3f3;
      .hc-goods-item-give {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #fd8789;
        border-radius: 2px;
        padding: 1px 2px;
        text-align: center;
        font-size: 62px;
      }
    }
    .hc-info-foot {
      table {
        padding: 15px 0;
        width: 100%;
      }
    }
    .hc-info-content,
    .hc-info-foot {
      overflow: hidden;
      margin: 0 15px;
      padding: 10px 0;
      p {
        margin: 0px;
        height: 24px;

        line-height: 24px;
        display: inline-block;
      }
      .hc-col-3 {
        text-align: right;
        width: 80px;
        padding-right: 10px;
      }
      .hc-info-text {
        padding-left: 60px;
        td {
          vertical-align: top;
          word-break: break-all;
          &:first-child {
            text-align: center;
            width: px2rem(40);
            padding-right: 5px;
          }
        }
      }
      .hc-info-img {
        position: absolute;
        width: 60px;
        display: flex;
        align-items: center;
        height: 100%;
        padding-bottom: 30px;
        img {
          width: 40px;
          height: 40px;
          display: inline-block;
        }
      }
      &.hc-commodity-info {
        border-bottom: 1px solid #f3f3f3;
        &:last-child {
          border-bottom: none;
        }
      }
      td {
        line-height: 20px;
        word-break: break-all;
        vertical-align: top;
        &:first-child {
          color: #9e9e9e;
          text-align: right;
          padding-right: 8px;
          width: 70px;
        }
      }
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
